<script setup>
	import { computed, ref } from 'vue'
	import Mobile from './components/mobile'
	import Password from './components/password'

	const tabMetas = [
		{ title: '密码登录', subTitle: '验证码登录' },
		{ title: '验证码登录', subTitle: '密码登录' },
	]
	const tabIndex = ref(0)
	const tabData = computed(() => {
		return tabMetas[tabIndex.value]
	})
	function otherLogin(index) {
		if (index !== 1) {
			return uni.utils.toast('暂不支持该模式')
		}
		// QQ登录（仅支持H5端）
		// #ifdef H5
		window.location.href =
			'https://graph.qq.com/oauth2.0/authorize?response_type=token&client_id=102015968&redirect_uri=http://consult-patients.itheima.net/pages/login/qq'
		// #endif
	}
</script>
<script>
	export default {
		options: {
			styleIsolation: 'shared',
			// 添加微信小程序特定配置
			mpOptions: {
				styleIsolation: 'apply-shared' // 允许页面继承app.wxss样式
			}
		},
	}
</script>
<template>
	<view class="login">
		<view class="login-type">
			<view class="password"> {{ tabData.title }} </view>
			<view class="validate">
				<text @click="tabIndex = Math.abs(tabIndex - 1)">{{
					tabData.subTitle
				}}</text>
				<uni-icons type="right" size="20" color="#3c3e42"></uni-icons>
			</view>
		</view>

		<Mobile v-if="tabIndex == 1" />
		<Password v-if="tabIndex == 0" />
		<view class="login-legend">
			<text class="text">其它方式登录</text>
		</view>
		<view class="login-method" @click="otherLogin(1)">
			<view class="icon"
				><uni-icons type="qq" size="30" color="#00b0fb"></uni-icons
			></view>

			<view class="icon" @click="otherLogin(2)"
				><uni-icons type="weibo" size="30" color="#fb6622"></uni-icons
			></view>
			<view class="icon" @click="otherLogin(3)"
				><uni-icons type="weixin" size="30" color="#07C160"></uni-icons
			></view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.login {
		padding: 60rpx;
		margin-top: 100rpx;
		.login-type {
			display: flex;
			justify-content: space-between;
			align-items: flex-end; //底部对齐
			.password {
				font-size: 48rpx;
				color: #121826;
			}
			.validate {
				display: flex;
				align-items: center;
				color: #3c3e42;
				font-size: 30rpx;
			}
		}

		.login-legend {
			height: 40rpx;
			position: relative;
			border-top: 1rpx solid #ebebeb;
			text {
				position: absolute;
				top: -50%;
				left: 50%;
				transform: translate(-50%);

				font-size: 28rpx;
				color: #999;
				padding: 0 10rpx;
				background-color: #fff;
			}
		}
		.login-method {
			display: flex;
			padding: 60rpx 0;
			justify-content: space-evenly; //项之间的间距均匀分布，同时子项与容器边缘的距离也保持一致。
			//space-around：子项之间的间距均匀分布，但子项与容器边缘的距离是子项之间间距的一半
			.icon {
				cursor: pointer;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 80rpx;
				height: 80rpx;
				border-radius: 100rpx;
				background-color: #f6f6f6;
			}
		}
	}
</style>
